<template>
    <div class="banner">
        <div class="herder-box">
            <h2>Banner图管理</h2>
            <hr>
            <div class="header">
                <div class="inp">
                    <span>Banner名称</span> &emsp;
                    <el-input v-model="textarea" :rows="1" placeholder="请输入" class="inpt" />
                </div>
                <div class="inpfoot">
                    <el-button type="primary" @click="sousuo">查询</el-button>
                </div>
            </div>
        </div>
        <div class="table-box">
            <div class="tableheader">
                <span>广告Banner列表</span>
                <div>
                    <el-button type="primary" @click="tobanone">+新建</el-button>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
                class="table">
                <el-table-column type="selection" width="55" />
                <el-table-column label="Banner缩略图" width="120">
                    <template #default="scope">
                        <img :src="scope.row.img" alt="">
                    </template>
                </el-table-column>
                <el-table-column property="name" label="名称" width="120" />
                <el-table-column label="类型">
                    <template #default="scope">
                        <el-switch v-model="scope.row.filge" />
                    </template>
                </el-table-column>
                <el-table-column property="add" label="添加人" show-overflow-tooltip />
                <el-table-column property="time" label="添加时间" show-overflow-tooltip />
                <el-table-column property="id" label="排序号" show-overflow-tooltip />
                <el-table-column label="操作" width="180" show-overflow-tooltip>
                    <template #default="scope">
                        <el-popconfirm title="确定删除" @confirm="() => del(scope.row.id)">
                            <template #reference>
                                <el-button>删除</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button @click="editShowFn(scope.row.id)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <Edit v-show="isShowEdit" @hide="hideFn" :id="editAdminName" @updatesuccess="successFn"></Edit>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// import { banner_list } from '@/api/zxl/ban'
import service from '@/utils/request'
import { ElTable } from 'element-plus'
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import Edit from './Banedit.vue'
import { Search } from '@element-plus/icons-vue'


//定义数据数据类型
interface bannerlist {
    "id": number,
    "img": string,
    "name": string,
    "filge": boolean,
    "add": string,
    "time": string
}

//实例化useRouter
let router = useRouter()
let textarea = ref('')

var tableData = reactive<bannerlist[]>([])

// onMounted(async () => {
//     //请求Banner数据
//     banner_list().then(res => {
//         console.log(res.data.data);
//     })
// })

const handleSelectionChange = () => {

}
//跳转到新建页面
const tobanone = () => {
    router.push('/index/Banone')
}

//获取轮播图信息
const bannerlist = () => {
    service({
        url: "http://localhost:3000/bannerlist"
    }).then(res => {
        console.log(res.data);
        if (textarea.value) {
            sousuo()
        } else {
            tableData.length = 0
            tableData.push(...res.data)
            // console.log(tableData); 
        }
    })
}
bannerlist()


//删除轮播图
const del = (id: any) => {
    service({
        url: `http://localhost:3000/bannerlist/${id}`,
        method: "delete"
    }).then(res => {
        ElMessage({
            message: "删除成功",
            type: "success"
        })
        bannerlist()
    })
}

//修改
const isShowEdit = ref(false);
const editAdminName = ref("");


const editShowFn = (id: any) => {
    editAdminName.value = id;
    isShowEdit.value = true
}

const hideFn = () => {
    isShowEdit.value = false;
}
const successFn = () => bannerlist();

//搜索
const sousuo = () => {
    service.get("http://localhost:3000/bannerlist", {
        params: { id: textarea.value }
    }).then(res => {
        console.log(res.data);
        tableData.length=0
        tableData.push(...res.data)
    })
}

</script>
<style scoped>
.herder-box {
    /* background-color: white; */
    height: 150px;
    background-color: rgba(255, 255, 255, 0.307);
}

.header {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    /* background-color: hotpink; */
}

.inp {
    display: flex;
    /* 是内部元素垂直居中 */
    align-items: center;
    /* 使内部元素水平居中 */
    /* justify-content:center; */
}

.inpt {
    width: 200px;
}

.table-box {
    margin-top: 20px;

}

.tableheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table {
    margin-top: 20px;
}

.el-button {
    background-color: rgba(255, 255, 255, 0.394);
}

img {
    width: 100%;
}
</style>